<template>
  <keep-alive>
    <div class="app-container">
      <el-form v-if="isCustom" :model="listQuery" ref="queryForm" :inline="true" v-show="showSearch">
        <el-form-item label="组合代码" prop="fundIds">
          <el-select v-model="listQuery.fundIds"
                     placeholder="请选择组合代码"
                     clearable
                     filterable
                     multiple
                     collapse-tags
                     style="width: 250px">
            <el-option v-for="item in fundList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="估值日期">
          <el-date-picker
              v-model="listQuery.valDate"
              style="width: 240px"
              value-format="YYYY-MM-DD"
              type="date"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search"  @click="fetchData">查询</el-button>
        </el-form-item>
      </el-form>
      <el-tabs v-if="isCustom"
               v-model="fundTabsValue"
               type="border-card"
               closable
               @tab-remove="removeTab"
      >
        <el-tab-pane
            v-for="(item, index) in fundTabs"
            :key="index"
            :label="item.title"
            :name="item.name"
        >
          <ChartItem ref="chartInfo" :resId="resId" :paramsInfo="item.content" :key="timer"/>
        </el-tab-pane>
      </el-tabs>
      <ChartItem v-if="!isCustom" ref="chartInfo" :resId="resId" :key="timer"/>
    </div>
  </keep-alive>

</template>

<script setup name="Rpchart">
import ChartItem from "./chartItem";
import { getMenuByPath } from "@/api/system/menu";
import useTagsViewStore from '@/store/modules/tagsView'
const route = useRoute();
const { proxy } = getCurrentInstance();
const data = reactive({
  listQuery: {
    fundIds: [],
    valDate:'',
  },
  timer: '1',
  showSearch: true,
  fundTabsValue: "2",
  isCustom: true,
  resId:'',
  fundList:[
    {
      name: "U24600_安鑫稳健7号",
      id: "U24600",
      content: ''
    },
    {
      name: "U24700_安鑫稳健8号",
      id: "U24700",
      content: ''
    },
    {
      name: "U24800_安鑫稳健9号",
      id: "U24800",
      content: ''
    },
  ],
  fundTabs: [
  ],
  tabIndex: 1
})
const { listQuery, timer, showSearch,fundTabsValue,isCustom,resId,fundList,fundTabs } = toRefs(data);
function init() {
  if (route.fullPath)
  {
    resId.value = route.fullPath.split('rpchart/')[1]
    isCustom.value = resId.value === 'I2c96074701679d2d9d2dba2f0167a55866132c17'
  }
}
function fetchData() {
  fundTabs.value = [];
  listQuery.value.fundIds.forEach((tab, index) => {
    fundList.value.find((item) => {
      if (item.id === tab) {
        let paramArray = [];
        let paramObject = {};
        paramObject.name = "组合代码";
        paramObject.value = item.id;
        paramObject.displayValue = item.name;
        paramArray.push(paramObject);
        paramObject = {};
        paramObject.name = "估值日期";
        paramObject.value = listQuery.value.valDate;
        paramObject.displayValue = listQuery.value.valDate;
        paramArray.push(paramObject);
        item.content = JSON.stringify(paramArray) //paramArray.toString();
        addTab(item);
      }
    });
  });
  timer.value = new Date().getTime();
}
function addTab(tabObj) {
  //console.log(tabObj);
  fundTabs.value.push({
    title: tabObj.name,
    name: tabObj.id,
    content: tabObj.content,
  });
  fundTabsValue.value = tabObj.id;
}
function removeTab(targetName) {
  let tabs = fundTabs.value;
  let activeName = fundTabsValue;
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        let nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          activeName = nextTab.name;
        }
      }
    });
  }
  fundTabsValue.value = activeName;
  fundTabs.value = tabs.filter((tab) => tab.name !== targetName);
}
init()
</script>

